<template>
	<view>
		<uni-popup
			ref="timePickRef"
			@maskClick="closePopup()"
			catchtouchmove="true"
		>
			<view class="popup-bd">
				<view class="popup-title mt20">
					日期时间选择
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup()"
					></uni-icons>
				</view>
				<view class="popup-content">
					<view
						v-if="
							formatData === 'yyyy-MM-dd HH:mm' ||
							formatData === 'yyyy-MM-dd'
						"
					>
						<view class="df mb20">
							<view
								class="mr20"
								@tap="changeTab('date')"
								:class="isShowScope === 'date' ? 'active' : ''"
								>{{ dateValue }}</view
							>
							<view
								v-if="formatData === 'yyyy-MM-dd HH:mm'"
								:class="isShowScope === 'time' ? 'active' : ''"
								@tap="changeTab('time')"
								>{{ timeValue }}</view
							>
						</view>
						<view class="mt20">
							<view v-if="isShowScope === 'date' && showCalendar">
								<uni-calendar
									:showMonth="false"
									@change="changeDate"
									:insert="true"
								/>
							</view>
							<view
								v-if="
									isShowScope === 'time' &&
									formatData === 'yyyy-MM-dd HH:mm'
								"
							>
								<picker-view
									:indicator-style="indicatorStyle"
									:value="selectTime"
									@change="bindChange"
									class="picker-view"
								>
									<picker-view-column>
										<view
											class="item"
											v-for="(item, index) in hours"
											:key="index"
											>{{ item }}</view
										>
									</picker-view-column>
									<picker-view-column>
										<view
											class="item"
											v-for="(item, index) in minutes"
											:key="index"
											>{{ item }}</view
										>
									</picker-view-column>
								</picker-view>
							</view>
						</view>
					</view>
					<view
						v-if="formatData === 'yyyy' || formatData === 'yyyy-MM'"
					>
						<picker-view
							:indicator-style="indicatorStyle"
							:value="selectYearOrMonth"
							@change="yearDateChange"
							class="picker-view"
						>
							<picker-view-column>
								<view
									class="item"
									v-for="(item, index) in years"
									:key="index"
									>{{ item }}</view
								>
							</picker-view-column>
							<picker-view-column v-if="formatData === 'yyyy-MM'">
								<view
									class="item"
									v-for="(item, index) in months"
									:key="index"
									>{{ item }}</view
								>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
				<view class="popup-bottom df ac"
					><button class="primary-button w90" @tap="submitChoose()">
						确定
					</button></view
				>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import { getCurrentDay } from '@/common/utils.js'
export default {
	props: {
		show: {
			type: Boolean,
			value: false,
			default: false,
		},
		formatData: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			indicatorStyle: `height: 50px;`,
			isShowScope: 'date',
			showCalendar: false,
			years: [],
			months: [],
			hours: [],
			minutes: [],
			timeValue: '',
			dateValue: '',
			selectTime: [],

			selectYearOrMonth: [],
			yearValue: '',
			monthValue: '',
		}
	},
	onReady() {
		this.$nextTick(() => {
			this.showCalendar = true
		})
	},
	methods: {
		submitChoose() {
			let str = ''
			if (this.formatData === 'yyyy-MM-dd HH:mm') {
				str = `${this.dateValue} ${this.timeValue}`
			} else if (this.formatData === 'yyyy-MM-dd') {
				str = this.dateValue
			} else if (this.formatData === 'yyyy-MM') {
				str = `${this.yearValue}-${this.monthValue}`
			} else {
				str = this.yearValue
			}
			this.$emit('submit', str)
			this.closePopup()
		},
		yearDateChange(e) {
			const val = e.detail.value
			this.selectYearOrMonth = val
			if (this.formatData === 'yyyy') {
				this.yearValue = this.years[val[0]]
			} else {
				this.yearValue = this.years[val[0]]
				this.monthValue = this.months[val[1]]
			}
		},
		bindChange(e) {
			const val = e.detail.value
			this.selectTime = val
			this.timeValue = `${this.hours[val[0]]}:${this.minutes[val[1]]}`
		},
		changeTab(type) {
			this.isShowScope = type
			if (type !== 'date') {
				this.selectTime = this.timeValue.split(':')
			}
		},
		getHours() {
			for (let i = 0; i < 24; i++) {
				if (i < 10) {
					this.hours.push(`0${i}`)
				} else {
					this.hours.push(i)
				}
			}
		},

		getMinutes() {
			for (let i = 0; i <= 59; i++) {
				if (i < 10) {
					this.minutes.push(`0${i}`)
				} else {
					this.minutes.push(i)
				}
			}
		},
		getYears(currentYear) {
			let startYear = currentYear - 20
			for (let i = startYear; i <= currentYear; i++) {
				this.years.push(`${i}年`)
			}
		},
		getMonths() {
			for (let i = 1; i <= 12; i++) {
				this.months.push(`${i}月`)
			}
		},
		changeDate(e) {
			this.dateValue = e.fulldate
			if (this.formatData === 'yyyy-MM-dd HH:mm') {
				this.isShowScope = 'time'
				this.selectTime = this.timeValue.split(':')
			}
		},
		openPopup() {
			this.isShowScope = 'date'
			const [y, m, d, w, h, minute] = getCurrentDay()
			const monthStr = new Date().getMonth()
			this.dateValue = `${y}-${m}-${d}`
			this.timeValue = `${h}:${minute}`
			this.yearValue = y
			this.monthValue = m
			this.getYears(y)
			this.getHours()
			this.getMinutes()
			this.getMonths()
			this.$refs.timePickRef.open('bottom')
		},
		closePopup() {
			this.$refs.timePickRef.close()
			this.$emit('close')
		},
	},
	watch: {
		show(val) {
			if (val) {
				this.openPopup()
			} else {
				this.closePopup()
			}
		},
	},
}
</script>
<style scoped lang="scss">
.popup-bd {
	height: calc(100vh - 300rpx);
}
.picker-view {
	text-align: center;
}
.item {
	line-height: 100rpx;
	text-align: center;
}
.active {
	color: $primary-color;
}
</style>
